<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%--常量--%>
    <%@ include file="/common/constHead.jsp"%>
    <%--jQuery--%>
    <%@ include file="/common/jqueryHead.jsp"%>
    <%--jo--%>
    <%@ include file="/common/joHead.jsp"%>
    <%--bootstrap和字体--%>
    <%@ include file="/common/bootstrapHead.jsp"%>
    <%--layer--%>
    <%@ include file="/common/layerHead.jsp"%>
    <%--日期选择--%>
    <%@ include file="/common/dateHead.jsp"%>
    <%--zTree树--%>
    <%@ include file="/common/zTreeHead.jsp"%>
    <%--上传插件--%>
    <%@ include file="/common/uploadHead.jsp"%>
    <%--公共--%>
    <%@ include file="/common/commonHead.jsp"%>
    <script src="<%=URL_STATIC%>static/plugin/echarts/echarts.js"></script>
    <title>保护地面积统计</title>
    <script type="text/javascript">
    $(function(){
        jo.postAjax("travel/reserve/naStatis.action",{},function(json){
     	   	 
             if(json && json.code == "0"){
                 var title = "保护地面积统计 单位 k㎡";
                 var eg = [""];
                 var xData = new Array();
                 var coreData = [{name:'该类型保护地总面积',type:'line',data:[],itemStyle: {   
                     //通常情况下：
                     normal:{  
                    	 color: "blue",
                         lineStyle: {
                             color: "red"
                         }
                     },
                     //鼠标悬停时：
                     emphasis: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 },}];
                 var data = json.data;
                 for (var i=0;i<data.length;i++){
                     var item = data[i];
                     xData.push(item.name);
                     coreData[0].data.push(item.area);
                 }
                 createLineChart("orderPic",title,eg,xData,coreData);
             	//饼
             	var eg2 = new Array();
             	var coreData2 = new Array();
             	for(var i = data.length;i>0;i--){
             		var item = data[i-1];
             		eg2.push(item.name);
             		coreData2.push({value:item.area,name:item.name});
             	}
             	createPieChart("pie","各保护地类型面积比例",eg2,coreData2);
             }
        });
     });
     //创建饼状图
     function createPieChart(sEleId,sTitle,aEg,aCoreData){
     	var option = {
     			title:{
     				text:sTitle,
     				x:'center'
     			},
     			tooltip:{
     				trigger:'item',
     				formatter:"{a} <br/>{b} : {c} ({d}%)"
     			},
     			 legend: {
                      orient: 'vertical',
                      left: 'left',
                      data: aEg
                  },
                  series : [
                      {
                          name: '该保护地类型面积占比',
                          type: 'pie',
                          radius : '55%',
                          center: ['50%', '60%'],
                          data:aCoreData,
                          itemStyle: {
                              emphasis: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                          }
                     }
                ],
                color: ['rgb(127,255,0)','rgb(255,255,0)','rgb(144,238,144)','rgb(180,205,205)','rgb(144,238,144)','rgb(0,0,139)','rgb(30,144,255)','rgb(255,130,171)','rgb(255,99,71)','rgb(222,184,135)','rgb(139,101,8)']
     	};
         var myChart = echarts.init(document.getElementById(sEleId));
         myChart.setOption(option);
         return myChart;
     }
      //创建折线图
     function createLineChart(sEleId,sTitle,aEg,aXData,aCoreData){
         var option = {
             title:{
                 text:sTitle
             },
             tooltip:{
                 trigger:'axis',
                 axisPointer:{
                     type:'shadow'
                 }
             },
             legend:{
                 data:aEg
             },
             grid: {
                 left: '3%',
                 right: '4%',
                 bottom: '10%',
                 y2:140,
                 containLabel: true
             },
             xAxis:{
                 type:'category',
                 data:aXData,
                 axisLabel: {  
                 	   interval:0,  
                 	   rotate:40
                 	}  
             },
             yAxis:{
                 type:'value',
                 boundaryGap: [0, 0.01]
             },
             series:aCoreData
         };
         var myChart = echarts.init(document.getElementById(sEleId));
         myChart.setOption(option);
         return myChart;
     } 
    </script>
</head>
<body>
<div class="container-fluid">
   <div class="row">
   		<div class="col-xs-6">
            <div id="orderPic" style="width: 100%;height: 600px;"></div>
        </div>
<!--         <div class="col-xs-2">
            <div id="orderPic" style="width: 100%;height: 600px;bottom: 50%">
            	<table style="margin-top: 100px">
            		<tr>
            			<td><font color="gray" size="3" >最大面积:</font></td>
            		</tr>
            		<tr>
            			<td>100k㎡</td>
            		</tr>
            		<tr>
            			<td><font color="gray" size="3" >最小面积:</font></td>
            		</tr>
            		<tr>
            			<td>100k㎡</td>
            		</tr>
            		<tr>
            			<td><font color="gray" size="3" >平均面积:</font></td>
            		</tr>
            		<tr>
            			<td>100k㎡</td>
            		</tr>
            	</table>
            </div>
        </div> -->
    	<div class="col-xs-6">
             <div id="pie" style="width: 100%;height: 600px;"></div>
        </div>
        
         
    </div>
</div>

<script src="<%=URL_STATIC%>static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
